<template>
  <div class="mime_container">
    <!-- 登录/未登录 -->
    <main>
      <header v-if="!isLogin" class="mime_logout_base_info">
        <img src="../img/mobile.png" alt="" />
        <div>
          <a href="javascript:;" @click="login">登录</a>
          <span> / </span>
          <a href="javascript:;">注册</a>
        </div>
      </header>
      <header v-else class="mime_login_base_info">
        <div>
          <div class="left">
            <div>
              <p>
                <van-icon
                  v-if="!userInfo.photo"
                  name="warning-o"
                  style="color: #fff"
                />
                <img v-else :src="userInfo.photo" />
              </p>
              <span>{{ userInfo.name }}</span>
            </div>
            <a href="javascript:;" class="right">编辑资料</a>
          </div>
          <div class="nav_bar">
            <p>
              <span>{{ userInfo.art_count }}</span>
              <span>条数</span>
            </p>
            <p>
              <span>{{ userInfo.follow_count }}</span>
              <span>关注</span>
            </p>
            <p>
              <span>{{ userInfo.fans_count }}</span>
              <span>粉丝</span>
            </p>
            <p>
              <span>{{ userInfo.like_count }}</span>
              <span>获赞</span>
            </p>
          </div>
        </div>
      </header>
      <nav>
        <van-grid :column-num="2">
          <van-grid-item icon="star-o" text="收藏" class="mime_collection" />
          <van-grid-item icon="underway-o" text="历史" class="mime_history" />
        </van-grid>
      </nav>
      <section>
        <van-cell-group>
          <van-cell title="消息通知" is-link />
          <van-cell title="小吴同学" is-link />
        </van-cell-group>
        <van-button v-if="isLogin" size="large" class="logout" @click="logout"
            >退出登录</van-button
          >
      </section>
    </main>
  </div>
</template>

<script>
import { mineUserInfo } from '@/network/index.js'
import { mapGetters } from 'vuex'
import { Dialog, Toast } from 'vant'
export default {
  name: 'Mine',
  data () {
    return {
      userInfo: {}
    }
  },
  async created () {
    try {
      const res = await mineUserInfo({
        method: 'get',
        url: '/app/v1_0/user'
      })
      const {
        data: { data }
      } = res
      console.log(data)
      if (data.name.length > 5) {
        data.name = data.name.substr(0, 5) + '...'
      }
      this.$store.commit('userInfoToken', data)
      this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
    } catch (err) {
      console.log(err.response)
    }
  },
  methods: {
    async logout () {
      try {
        await Dialog.confirm({
          title: '确认退出吗?'
        })
        Toast.success('已退出登录')
        this.$store.commit('setLoginToken', null)
        this.$store.commit('userInfoToken', null)
      } catch (err) {
        if (err === 'cancel') {
          Toast('取消退出登录')
        }
      }
    },
    login () {
      this.$router.push('/')
    }
  },
  computed: {
    ...mapGetters(['isLogin'])
  }
}
</script>

<style lang="less" scoped>
.mime_container {
  width: 100%;
  height: 100%;
  background-color: #f5f7f9;
  main {
    header {
      height: 361px;
      color: #fff;
      background: url('../img/banner.png') no-repeat;
      background-size: cover;
      box-sizing: border-box;
      a {
        color: #fff;
      }
      &.mime_logout_base_info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        img {
          width: 132px;
          height: 132px;
          margin: 15px 0;
        }
        a,
        span {
          font-size: 28px;
        }
      }
      &.mime_login_base_info {
        padding: 40px 32px 0;
        /deep/.left {
          display: flex;
          align-items: center;
          justify-content: space-between;
          div {
            display: flex;
            align-items: center;
            margin-top: 30px;
          p {
              display: flex;
              justify-content: center;
              align-items: center;
              overflow: hidden;
              width: 132px;
              height: 132px;
              margin: 0 20px 0 0;
              background-color: #fff;
              border-radius: 50%;
              .van-icon-warning-o {
                color: #ccc;
              }
              img {
                width: 100%;
                height: 100%;
              }
            }
            span {
              font-size: 35px;
            }
          }
        }
        a {
          padding: 0 20px;
          height: 50px;
          line-height: 50px;
          font-size: 20px;
          color: #323233;
          background-color: #fff;
          border-radius: 25px;
        }
        .nav_bar {
          display: flex;
          justify-content: space-around;
          p {
            display: flex;
            margin-top: 30px;
            flex-direction: column;
            align-items: center;
            font-size: 35px;
            span {
              &:last-of-type {
                margin-top: 10px;
                font-size: 25px;
              }
            }
          }
        }
      }
    }
  }
  nav {
    .mime_collection {
      color: #ee7171;
    }
    .mime_history {
      color: #ffa429;
    }
    /deep/.van-grid-item__text {
      margin-top: 5px;
      font-size: 30px;
    }
  }
  /deep/section {
    margin-top: 10px;
    background-color: #f5f7f9;
    .logout.van-button--large {
      margin-top: 10px;
      color: #d86262;
    }
    .van-button--default {
      border: 0;
    }
  }
}
</style>
